<template>
	<view>
		<view class="data">
			<!-- 2、利用v-for循环遍历数据,数据使用对象的方式存储 -->
			<!-- 3、使用三目运算,判断他的day是否等于dataShow,如果等于则高亮 -->
			<ul>
				<li style="" v-for="(item,index) in dataTime" :key="index"
					:class="item.number==dataShow.number?'dataActive':'ral'" @click="show(item)">
					<text style="font-size: 14px;color:black;">{{item.day}}</text>
					<text>{{item.number}}</text>
				</li>
			</ul>
		</view>


		<uni-section title="坐诊医生" type="line">
			<view v-for="(r,index) in Doctors" :key="index">
				<uni-card :is-shadow="false">
					<view style="width: 300px;height: 70px;">
						<view style="float: left;">
							<image style="height: 60px;width: 60px;margin-right: 10px;" :src="r.img">
							</image>
						</view>
						<view style="float: left;width: 230px;height: 60px;">

							<p style="font-size: 16px;">{{r.doctorName}}<span
									style="font-size: 12px;margin-left: 5px;">主任医师</span>
							</p>
							<p style="font-size: 12px;">{{r.introduction}}</p>

						</view>
					</view>
					<view style="width: 300px;height: 50px;">
						<p
							style="color: rgba(244, 99, 99, 0.988235294117647);font-size: 18px;float: left;margin-top: 20px;">
							￥{{r.registration}}</p>
						<view
							style="width: 80px;height: 32px;background-color: rgba(0, 110, 255, 1);float: right;border-radius: 4px;margin-top: 15px;">
							<p style="font-size: 14px;color: aliceblue;text-align: center;margin-top: 5px;"
								@click="yuyue(r)">预约</p>
						</view>
					</view>
				</uni-card>

				<view>
					<u-popup :show="show2" :round="10" mode="bottom" :overlay='overlay' @close="close" @open="open" overlayOpacity="0.2"
						:closeable="closeable" :closeOnClickOverlay="closeOnClickOverlay">
						<view style="height: 380px;">
							<view style="padding-bottom: 20rpx;margin-top: 20px;">
								<p style="text-align: center;font-size: 16px;">选择预约时间</p>
							</view>
							<view style="display: block;">
								<view style="margin: 20rpx;font-size: 16px;color: #999999;">上午号源</view>
								<view class="div7">
									<view style="height: 100px;padding-top: 15px;">

										<view v-for="(item,index) in times1" :key="index" style="float: left;width:70px;height: 30px;background-color: rgba(0, 110, 255, 0.055);;margin-left: 15px;margin-bottom: 15px;
											border-radius: 5px;" @click="Toyuyue(item.time)">
											<p style="font-size: 16px;text-align: center;margin-top: 5px;color: #006eff;">
												{{item.time}}</p>
										</view>

									</view>


								</view>
							</view>
							<view style="display: block;">
								<view style="margin: 20rpx;font-size: 16px;color: #999999;display: block;">下午号源</view>
								<view class="div7">
									<view style="height: 100px;padding-top: 15px;">
										<view v-for="(item,index) in times2" :key="index" style="float: left;width:70px;height: 30px;background-color: rgba(0, 110, 255, 0.055);;margin-left: 15px;margin-bottom: 15px;
											border-radius: 5px;" @click="Toyuyue(item.time)">
											<p style="font-size: 16px;text-align: center;margin-top: 5px;color: #006eff;">
												{{item.time}}</p>
										</view>
									</view>
								</view>
							</view>
						</view>
					</u-popup>
				</view>
			</view>


		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 1、创建数据对象,并创建控制条件:dataShow:'今天'
				dataShow: '',
				dataTime: [
					
				],
				Doctors: [],
				overlay:true,
				show2: false,
				closeable: true,
				closeOnClickOverlay: true,
				times1: [{
						time: "8:00"
					},
					{
						time: "8:30"
					},
					{
						time: "9:00"
					},
					{
						time: "9:30"
					},
					{
						time: "10:00"
					},
					{
						time: "10:30"
					},
					{
						time: "11:00"
					},
					{
						time: "11:30"
					}
				],
				times2: [{
						time: "2:00"
					},
					{
						time: "2:30"
					},
					{
						time: "3:00"
					},
					{
						time: "3:30"
					},
					{
						time: "4:00"
					},
					{
						time: "4:30"
					},
					{
						time: "5:00"
					},
					{
						time: "5:30"
					}
				],

			};
		},
		onLoad() {
			//后端获取当前一周的日期 与 周几
			this.getDates();

			//this.nucleicAcidAppoientmentEcho()

		},
		methods: {
			yuyue(Doctor){
				this.show2 = true
				
				uni.setStorage({
					key: 'doctor',
					data: Doctor,
					success() {
						console.log('医生id存储成功')
					}
				})
			},
			Toyuyue(time){
				console.log(time)
				
				uni.setStorage({
					key: 'dataShow',
					data: this.dataShow,
					success() {
						console.log('候诊时间存储成功')
					}
				})
				
				uni.setStorage({
					key: 'time',
					data: time,
					success() {
						console.log('候诊时间存储成功')
					}
				})
				
				setTimeout(() => {
					uni.navigateTo({
						url: '../zqw/yuyuexinxi'
					})
				})
			},
			show(item) {
				this.dataShow = item
				console.log(item)
				this.getDoctors()
			},
			getDoctors() {
				this.$axios.get("/user/user/doctor/getDoctors/" + this.dataShow.day).then((
						res) => {
						//response 接口返回数据
						//console.log("成功"+res.data.data.list)
						this.Doctors = res.data.data.list
						//console.log(this.Doctors)
					}) //请求成功
					.catch((error) => {
						console.log(error);
					});
			},
			getDates() {
				console.log("进入")
				this.$axios.get("/user/user/the-patient/getDates").then((
						res) => {
						//response 接口返回数据
						console.log("成功")
						console.log(res.data.data.list)
						console.log(res.data.data.today)
						this.dataTime = res.data.data.list
						this.dataShow = res.data.data.today
						console.log(this.dataShow)

						//根据当前星期 查询当天医生
						this.getDoctors();
					}) //请求成功
					.catch((error) => {
						console.log(error);
					}); //请求
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show2 = false

				// console.log('close');
			},
		},
	}
</script>

<style lang="scss" scoped>
	.data {
		width: 100%;
		height: 190upx;
		box-shadow: 2upx 2upx 3upx #5b5b5b;

		// 100 140
		ul {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin: 0;
			padding: 0;
			list-style: none;

			li {
				width: 100upx;
				height: 140upx;
				text-align: center;
				// 设置弹性盒子,并且竖向排列
				display: flex;
				flex-direction: column;
				text-align: center;

				text {
					color: #aaa;
				}

			}

			.ral {
				width: 90upx;
				height: 80upx;
				background: #e2e9f9;
				text-align: center;
				line-height: 80upx;
				border-radius: 40upx;
				color: #000
			}

			.dataActive {
				width: 80upx;
				height: 80upx;
				text-align: center;
				line-height: 80upx;
				background: #006eff;
				color: #fff;
				border-radius: 40upx;
			}
		}
	}

	.div1 {
		width: 600rpx;
		background-color: #f3f8ff;
		border: f4f4f5 solid 1rpx;
		border-radius: 15px;
		margin-left: 10px;
		margin-top: 10px;
		padding: 50rpx;
	}

	.div9 {

		width: 660rpx;
		height: 130rpx;
		border: f4f4f5 solid 1rpx;
		border-radius: 15px;
		margin-left: 10px;
		margin-top: 10px;
		padding: 20rpx;
		text-align: center;
	}

	.div2 {
		color: #b1b2b4;
		float: left;
	}

	.div3 {

		margin: 8.2rpx;
		float: left;
	}

	.div4 {
		font-size: 20rpx;
	}

	.div5 {
		font-size: 23rpx;
		padding: 4rpx 18rpx;
		background-color: #9ACAFC;
		margin: 10rpx;

		border-radius: 20rpx;
	}


	.div7 {
		display: block;
	}

	.div8 {
		background-color: #9ACAFC;
		color: #007AFF;
		width: 100px;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 20rpx;
		text-align: center;
		display: inline-block;
		margin: 20rpx;
	}


	.toBlue {
		background-color: #007AFF;
	}

	.toGray {
		background-color: #C8C9CC;
	}

	.tag1 {
		display: inline-block;
		color: #3289ff;
		margin-left: 10px;

		/* background-color: #3289ff; */
	}
</style>
